<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>高德地图API自定义地图</title>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<meta name="keywords" content="高德地图" />
	<meta name="description" content="高德地图" />
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	    body{margin:0;padding:0;}
	    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
	    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
	</style>
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=5c7319868e7c245b3bd8f8b25d81fb20"></script> 
  </head>
  
  <body>
    <div style="width:100%;height:100%;border:#ccc solid 1px;" id="dituContent"></div>
  </body>
  
  <script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    
    //创建地图函数：
    function createMap(){
    	var map = new AMap.Map('dituContent', {
    	    resizeEnable: true,
    	    zoom:11,
    	    center: [119.423443,32.400921]        
    	});
    	
        window.map = map;//将map变量存储在全局 
    }
    
    //地图控件添加函数：
    function addMapControl(){
    	AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
    		    function(){
    		        map.addControl(new AMap.ToolBar());
    		        map.addControl(new AMap.Scale());
    		        map.addControl(new AMap.OverView({isOpen:true}));
    		});
    }
    
    
  	//标注点数组
    var markerArr = [{state:1,title:"发大水",content:"发大水发大水",point:"119.423443|32.400921",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
    					{state:2,title:"11111111",content:"车牌号：<br>22222222211111111111111111111<br>1111111111111111111111111111",point:"119.423443|32.400822",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
		 ];
  	
    var infoWindow = new AMap.InfoWindow();
    
    function markerClick(e){
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            
            var marker = new AMap.Marker({
            	icon : 'http://www.365ctrl.com/img/map/light_orange.png',
                position: [p0, p1],
                offset : new AMap.Pixel(-12,-12)
            });
            
            marker.content=json.content;
            
            marker.setMap(map);
            
            marker.on('click', markerClick);
        }
    }
    
    initMap();//创建和初始化地图
</script>
</html>
